<template>
	<div class="home">
		<!-- 用户信息 -->
		<el-row :gutter="15">
			<el-col :md="24" :lg="16" :xl="16" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>{{ $t('message.card.title1') }}</span>
					</div>
					<div class="user-item">
						<div class="user-item-left">
							<img :src="userInfo.photo" />
						</div>
						<div class="user-item-right overflow">
							<el-row>
								<el-col :span="24" class="right-title mb15 one-text-overflow"
									>{{ currentTime }}，{{ userInfo.userName }}，{{ dailyMessage }}
								</el-col>
								<el-col :span="24">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label">昵称：</div>
										<div class="right-value">{{ userInfo.userName }}</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label">身份：</div>
										<div class="right-value">{{ userInfo.roles}}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt5">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label one-text-overflow">IP：</div>
										<div class="right-value one-text-overflow">192.168.1.1</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label one-text-overflow">登录：</div>
										<div class="right-value one-text-overflow">{{ userInfo.time }}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt15">
									<el-button size="small" icon="el-icon-edit-outline" @click="openUpdatePersonDialog">修改信息 </el-button>
									<el-button size="small" icon="el-icon-position" type="primary" @click="openUpdatePwdDialog">修改密码 </el-button>
									<!-- <el-button size="small" icon="el-icon-position" typeprimaryprimary">发布活动</el-button> -->
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :md="24" :lg="8" :xl="8" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>{{ $t('message.card.title2') }}</span>
						<el-button class="home-card-more" type="text" @click="onOpenMore">{{ $t('message.card.title3') }}</el-button>
					</div>
					<div class="info">
						<Scroll :data="newsInfoList" class="info-scroll" :class-option="optionSingleHeight">
							<ul class="info-ul">
								<li v-for="(v, k) in newsInfoList" :key="k" class="info-item" @click="onNewsInfoListClick(v)">
									<div class="info-item-left" v-text="v.title"></div>
									<div class="info-item-right" v-text="v.date"></div>
								</li>
								<li v-if="newsInfoList.length == 0">暂无消息</li>
							</ul>
						</Scroll>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog
			title="修改信息"
			:visible.sync="updatePersonDialog.visible"
			width="30%"
			:before-close="handleUpdatePersonClose">
			<el-form
        ref="userFormRef"
        :model="formData"
        label-width="100px">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="formData.phoneNumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleUpdatePersonClose">取 消</el-button>
				<el-button type="primary" @click="saveUpdatePwd">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog
			title="修改信息"
			:visible.sync="updatePwdDialog.visible"
			width="30%"
			:before-close="handleUpdatePwdClose">
			<el-form
        ref="pwdFormRef"
        :model="pwdFormData"
        label-width="100px">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="pwdFormData.oldPwd" type="password" placeholder="请输入用户名称" />
        </el-form-item>
				<el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdFormData.newPwd" type="password" placeholder="请输入用户名称" />
        </el-form-item>
      </el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleUpdatePwdClose">取 消</el-button>
				<el-button type="primary" @click="saveUpdatePwd">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, dailyMessage } from './mock';
import router, { resetRouter } from '@/router/index';
import userApi from '@/api/system/user'
export default {
	name: 'home',
	components: { Scroll },
	data() {
		return {
			recommendList,
			chartsRightList,
			newsInfoList: [],
			userInfo: {},
			dailyMessage: {},
			charts: {
				theme: '',
				bgColor: '',
			},
			global: {
				homeChartOne: null,
				homeChartTwo: null,
				homeCharThree: null,
				dispose: [null, '', undefined],
			},
			updatePersonDialog: {},
			personInfoForm: {},
			formData: {},

			updatePwdDialog: {},
			pwdFormData: {},
		};
	},
	created() {
		this.initUserInfo();
		this.initDailyMessage();
    
	},
	computed: {
		currentTime() {
			return formatAxis(new Date());
		},
		optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
		
	},
	mounted() {
		this.initNumCountUp();
	},
	methods: {
		saveUpdatePwd () {
			this.pwdFormData.userId = this.userInfo.id;
			userApi.updatePwd(this.pwdFormData).then(res => {
				this.$message({message: '用户密码修改成功！', type: 'success'});
				this.$set(this.updatePwdDialog, 'visible', false);
				localStorage.clear();
				router.push('/login');
				store.commit('setMenuData', {});
				resetRouter(); // 重置路由
			})
		},
		openUpdatePwdDialog () {
			this.$set(this.updatePwdDialog, 'visible', true);
		},
		handleUpdatePwdClose () {
			this.$set(this.updatePwdDialog, 'visible', false);
		},
		saveUpdatePerson () {
			userApi.update(this.formData).then((res) => {
				this.$message({message: '用户修改成功！', type: 'success'});
				this.userInfo.userName = this.formData.name;
				// 存储用户信息到浏览器缓存
				localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
				this.handleUpdatePersonClose();
			});
		},
		openUpdatePersonDialog () {
			userApi.get(this.userInfo.id).then((res) => {
          let data = res.data;
          this.formData = data;
					this.$set(this.updatePersonDialog, 'visible', true);
        });
		},
		handleUpdatePersonClose () {
			this.$set(this.updatePersonDialog, 'visible', false);
		},
		// 初始化数字滚动
		initNumCountUp() {
			this.$nextTick(() => {
				new CountUp('titleNum1', Math.random() * 100000).start();
				new CountUp('titleNum2', Math.random() * 100000).start();
				new CountUp('titleNum3', Math.random() * 100000).start();
			});
		},
		// 随机语录
		initDailyMessage() {
			this.dailyMessage = '欢迎登录缮菌科技后端系统';
		},
		// 初始化登录信息
		initUserInfo() {
			if (!localStorage.getItem('userInfo')) return false;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
		},
		// 消息通知当前项点击
		onNewsInfoListClick(v) {
			window.open(v.link);
		},
		// 跳转到 gitee
		onOpenMore() {
		},
	},
	watch: {
	},
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
